<template>
	<div v-loading="data.mtloading">
		<div class="text-center">
			<el-transfer v-model="data.machineid" :data="data.machine_list" filterable :titles="[$t('account.account.machineList'), $t('account.account.device')]" />
		</div>
		<div class="w-full text-center pt-6">
			<el-button type="primary" @click="submit">{{ $t('public.save')}}</el-button>
			<el-button @click="cancel">{{ $t('public.cancel')}}</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { getmanagermachineList } from '@/api/account';
let emit = defineEmits(['investigate'])
let props = defineProps({
	list: {
		type: Array,
		default: []
	},
	info: {
		type: Object,
		default: {}
	}
})

let data = reactive({
	mtloading: false, // 加载
	machine_list: [], // 设备列表
	machineid: [], // 选中的设备
})

// 筛选设备
let getinfo = async () => {
	let list = props.list
	let info = props.info
	data.mtloading = true
	data.machine_list = []
	let Array = []

	await getmanagermachineList({ manager_id: info.manager_id }).then(res => {
		if (res.state == 200) {
			Array = res.data
		}
	}).catch(err => {
		data.mtloading = false
	})

	data.mtloading = false

	for (let item of list) {
		item.key = item.m_id,
			item.label = item.machine_id + ' - ' + item.machine_name
		data.machine_list.push(item)
		for (let ime of Array) {
			if (item.machine_id == ime.machine_id) {
				handleSelectionChange(item.m_id)
			}
		}

	}
}

// 选中设备
let handleSelectionChange = (e) => {
	data.machineid.push(e)
}

// 保存
let submit = () => {
	if (!data.machineid.length) {
		ElMessage({
			message: $t('message.isEmpty'),
			type: 'error'
		})
		return
	}
	let obj = {
		manager_id: props.info.manager_id,
		m_ids: data.machineid.join(',')
	}
	emit('investigate', obj)
}

// 取消
let cancel = () => {
	emit('investigate', false)
}

getinfo()

</script>
<style lang="scss" scoped>
.el-transfer{
	--el-transfer-panel-width: 297px;
	--el-transfer-panel-body-height: 400px;
}
</style>